<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function (){
            var res = false

            function getDeparts(){
                $.ajax({
                    url:"/student/getDeparts",
                    type:"post",
                    success: function(data) {
                        let r = data;
                        if (r.code === 1) {
                            departs = r.data
                            for(i=0;i<departs.length;i++){
                                $("#depart").append("<option value="+departs[i].id+">"+
                                    departs[i].name+"</option>");
                            }
                            getGrades($("#depart").val())
                        } else {
                            alert(r.msg)
                        }
                    }
                })
            }

            function getGrades(departId){
                $.ajax({
                    url:"/teacher/getGrade",
                    type:"post",
                    data: JSON.stringify({
                        "id": departId
                    }),
                    contentType:"application/json",
                    dataType:"json",
                    success: function(data) {
                        let r = data;
                        if (r.code === 1) {
                            grades = r.data
                            $("#grade").html("")
                            for(i=0;i<grades.length;i++){
                                $("#grade").append("<option>"+
                                    grades[i]+"</option>");
                            }
                        } else {
                            alert(r.msg)
                        }
                    }
                })
            }

            $("#gradeBox").hide()
            $("#departBox").hide()
            $("#btnLogin").click(
                function (){
                    $.ajax({
                        url:"/student/login",
                        type:"post",
                        data: JSON.stringify({
                                "studentId": $("#studentId").val(),
                                "password": $("#password").val()
                              }),
                        contentType:"application/json",
                        dataType:"json",
                        success: function(data) {
                                let r = data;
                                if (r.code === 1) {
                                    let stu = JSON.stringify(r.data)
                                    localStorage.setItem("student", stu)
                                    window.location.href = "studentMain.html";
                                } else {
                                    alert(r.msg)
                                }
                            }
                        }
                    )
                }
            );
            $("#depart").change(
                function (){
                    getGrades($("#depart").val())
                }
            )
            $("#btnRes").click(
                function (){
                    if(!res){
                        $("#departBox").show()
                        $("#gradeBox").show()
                        getDeparts()
                        res = true
                        alert("请选择学院和年级")
                    }
                    else{
                        $.ajax({
                            url:"/student/register",
                            type:"post",
                            data: JSON.stringify({
                                "studentId": $("#studentId").val(),
                                "password": $("#password").val(),
                                "departId": $("#depart option:selected").val(),
                                "departName": $("#depart option:selected").text(),
                                "grade": $("#grade").val()
                            }),
                            contentType:"application/json",
                            dataType:"json",
                            success: function(data) {
                                let r = data;
                                if (r.code === 1) {
                                    let stu = JSON.stringify(r.data)
                                    localStorage.setItem("student", stu)
                                    alert("请尽快完善个人信息")
                                    setTimeout(function (){
                                        window.location.href = "studentMain.html";
                                    } ,1000)
                                } else {
                                    alert(r.msg)
                                }
                            }
                        })
                    }
                }
            );
        })
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            background: gray;
        }

        .box{
            position: relative;
            width: 380px;
            background: lightblue;
            border-radius: 8px;
            overflow: hidden;
        }

        form {
            position: relative;
            inset: 2px;
            background: lightseagreen;
            padding: 50px 40px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
        }

        h3 {
            color: black;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
        }

        .inputBox {
            position: relative;
            width: 300px;
            margin-top: 35px;
        }

        .inputBox input {
            width: 80%;
            padding: 10px 5px 5px;
            color: black;
            font-size: 1em;
            letter-spacing: 0.05em;
        }

        .inputBox label {
            font-size: 1.2em;
            color: black;
            letter-spacing: 0.05em;
        }

        .inputBox select {
            width: 30%;
            padding: 10px 5px 5px;
            color: black;
            font-size: 1em;
            letter-spacing: 0.05em;
        }

        #depart {
            width: 50%;
        }

        .btns{
            position: relative;
            margin-top: 35px;
            display: flex;
	        justify-content: space-between;
        }

        button[type="button"] {
            border: none;
            outline: none;
            padding: 11px 25px;
            background: slategrey;
            cursor: pointer;
            border-radius: 4px;
            font-weight: 600;
            width: 100px;
            margin-top: 10px;
        }

        button[type="button"]:active {
            opacity: 0.8;
        }

    </style>
    <meta charset="UTF-8">
    <title>mypass</title>
</head>
<body>
    <div class="box">
        <form id="loginForm" autocomplete="off">
            <h3>学生外出申请系统</h3>
            <div class="inputBox">
                <tr>
                    <td>
                        <label>学号</label>
                    </td>
                    <td>
                        <input type="text" name="studentId" id="studentId">
                    </td>
                </tr>              
            </div>
            <div class="inputBox">
                <label>密码</label>
                <input type="password" name="password" id="password">
            </div>
            <div class="inputBox" id="departBox">
                <label>学院</label>
                <select id="depart"></select>
            </div>
            <div class="inputBox" id="gradeBox">
                <label>年级</label>
                <select id="grade"></select>
            </div>
            <div class="btns">
                <button type="button" id="btnLogin">登录</button>
                <button type="button" id="btnRes">注册新账号</button>
            </div> 
        </form>
    </div>
</body>
</html>

